import React from 'react'
import {useDispatch,useSelector } from "react-redux"
import * as action from "../../action"
import {Button,Dialog} from "react-vant"
import {useNavigate} from "react-router-dom"
import { useState } from 'react'
function Address() {
   let [delIndex,setDelIndex] = useState(0)
   let navigate = useNavigate()
  let dispatch = useDispatch()
  let store = useSelector(state=>({...state.shopreducer}))
  console.log(store);
  let addaddressfn = ()=>{
    navigate("/addaddress")
  }
  let delfn = (index)=>{
     setDelIndex(index)
     Dialog.confirm({
        title: '删除框',
        message: '您确定要删除吗？',
      })
        .then(() => {
           dispatch(action.delfn(delIndex))
        })
        .catch(() => {
         
        })
  }
  let editfn = (item,index)=>{
      let edititem = Object.assign({},item,{index:index})
      console.log(edititem,"editinten");
      navigate("/addaddress",{
        state:edititem,

      })
  }
  return (
    <div>
        <Button onClick={addaddressfn}>新增地址</Button>
        {
            store.addressarr ?. map((item,index)=>(
                <li key={index}>
                    <p>姓名：{item.name}</p>
                    <p>地址：{item.address}</p>
                    <p>phone:{item.phone}  <Button onClick={()=>delfn(index)}>删除</Button><Button onClick={()=>editfn(item,index)}>编辑</Button></p>
                </li>
            ))
        }
    </div>
  )
}

export default Address